<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="utf-8">
	    <title>DesignPortfolio</title>
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <meta name="description" content="">
	    <meta name="author" content="">

	    <!-- Styles -->
	    <link href='http://fonts.useso.com/css?family=Open+Sans:400,700' rel='stylesheet' >
	    <link href="css/bootstrap.css" rel="stylesheet">
	    <link href="css/responsive.bootstrap.css" rel="stylesheet">
	    <link href="css/screen.css" rel="stylesheet">

	    <!--[if lt IE 9]>
	      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	    <![endif]-->

	    <!-- Faviocon and touch -->
	    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="#">
	    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="#">
	      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="#">
	                    <link rel="apple-touch-icon-precomposed" href="#">
	                                   <link rel="shortcut icon" href="img/favicon/favicon.ico">


	</head>
	<body>
		
		<!-- START SETTINGS BOX -->
			<div class="customPanel customPanelClosed">
				  <div class="customPanelOptions">
					    Site Color<br />
					    <div class="customPanelOptionsPickerButton customPanelOptionsPickerButtonSite"></div>
					    <div style="clear:both;"></div>
				  </div>
				  <div class="customPanelOptionsPicker customPanelOptionsPickerBackground"></div>
				  <div class="customPanelOptionsPicker customPanelOptionsPickerSite"></div>
				  <div class="customPanelButton"></div>
			</div>
			<!-- END SETTINGS BOX --> 

		<header>
			<div class="navTop">
				<div class="container">
					<div class="row">
						<nav class="span12">
							<ul class="clearfix unstyled pull-right">
								<li>
									<a href="#" title="twitter">Twitter</a>
								</li>
								<li>
									<a href="#" title="Flckr">Flckr</a>
								</li>
								<li>
									<a href="#" title="Facebook">Facebook</a>
								</li>
								<li>
									<a href="#" title="Google+">Google+</a>
								</li>
							</ul>
						</nav><!-- /nav -->
					</div><!-- /.row [TopNavigation] -->
				</div><!-- /.container -->
			</div><!-- /.navTop -->

			<div class="mainNav">
				<div class="container">
					<div class="row">
						<div class="span4">
							<a href="index-2.html" class="brand">Design Portfolio</a>
						</div>
						<nav class="span8 clearfix navbar-inner">
							<a class="btn btn-color menuMobile" data-toggle="collapse" data-target=".nav-collapse">menu</a>
						    <div class="nav-collapse collapse">
								<ul class="nav inline pull-right menu">
									<li class="active">
										<a href="#">Home</a>
										<ul class="unstyled">
											<li><a href="index-2.html">Home default</a></li>
											<li><a href="home_1.html">Home var1</a></li>
											<li><a href="home_2.html">Home var2</a></li>
										</ul>
									</li>
									<li>
										<a href="#">Pages</a>
										<ul class="unstyled">
											<li><a href="about_us.html">About us</a></li>
											<li><a href="service.html">Services</a></li>
											<li><a href="faq.html">Faq</a></li>
											<li><a href="features.html">Features</a></li>
											<li><a href="error_404.html">error 404</a></li>
											<li><a href="full_width.html">Full width</a></li>
											<li><a href="right_sidebar.html">Right sidebar</a></li>
											<li><a href="left_sidebar.html">Left sidebar</a></li>
										</ul>
									</li>
									<li>
										<a href="#">GALLERY</a>
										<ul class="unstyled">
											<li><a href="gallery_2.html">Gallery 2 columns</a></li>
											<li><a href="gallery_3.html">Gallery 3 columns</a></li>
											<li><a href="gallery_4.html">Gallery 4 columns</a></li>
										</ul>
									</li>
									<li>
										<a href="#">PORTFOLIO</a>
										<ul class="unstyled">
											<li><a href="portfolio_2.html">Portfolio 2 columns</a></li>
											<li><a href="portfolio_3.html">Portfolio 3 columns</a></li>
											<li><a href="portfolio_4.html">Portfolio 4 columns</a></li>
										</ul>
									</li>
									<li>
										<a href="#">BLOG</a>
										<ul class="unstyled">
											<li><a href="blog_right_sidebar.html">Right sidebar</a></li>
											<li><a href="blog_left_sidebar.html">Left sidebar</a></li>
											<li><a href="blog.html">Full width</a></li>
											<li><a href="blog_single_post.html">Single post</a></li>
										</ul>
									</li>
									<li><a href="contacts.html">CONTACTS</a></li>
								</ul>
							</div>
						</nav><!-- /nav.span6 [MainNavigation] -->
					</div><!-- /.row [Logo, MainNavigation] -->
				</div><!-- /.container -->
			</div><!-- /.mainNav -->
		</header><!-- /header -->

		<!-- Fix html5 sematic on silder
		####################################### -->
		<div class="container-fluid bigSlider">
			<div class="rs_mainslider">
				<ul class="rs_mainslider_items unstyled">
					<li class="rs_mainslider_items_active">
						<img src="img/slider_photo/slide1.jpg" alt="slide1" class="rs_mainslider_items_image">
						<div class="rs_mainslider_items_text container">
							<div class="row">
								<div class="span6">
									<h2>Lorem ipsum</h2>
									<h2>Donec mattis, magna nec lacinia </h2>
									<h1>Lorem Ipsum</h1>
									<h3>augue pulvinar auctor. Lorem ipsum dolor sit </h3>
								</div>
								<div class="span6">
									<iframe src="http://player.vimeo.com/video/30585464" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
								</div>
							</div>
						</div>
					</li>
					<li class="rs_mainslider_items_active">
						<img src="img/slider_photo/slide2.jpg" alt="slide2" class="rs_mainslider_items_image">
						<div class="rs_mainslider_items_text container">
							<div class="row">
								<div class="span6">
									<h2>Lorem ipsum</h2>
									<h2>Donec mattis, magna nec lacinia </h2>
									<h1>Lorem Ipsum</h1>
									<h3>augue pulvinar auctor. Lorem ipsum dolor sit </h3>
								</div>
								<div class="span6">
									<!-- Video embed -->
								</div>
							</div>
						</div>
					</li>
					<li class="rs_mainslider_items_active">
						<img src="img/slider_photo/slide3.jpg" alt="slide3" class="rs_mainslider_items_image">
						<div class="rs_mainslider_items_text container">
							<div class="row">
								<div class="span6">
									<h2>Lorem ipsum</h2>
									<h2>Donec mattis, magna nec lacinia </h2>
									<h1>Lorem Ipsum</h1>
									<h3>augue pulvinar auctor. Lorem ipsum dolor sit </h3>
								</div>
								<div class="span6">
									<iframe src="http://player.vimeo.com/video/30585464" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
								</div>
							</div>
						</div>
					</li>
				</ul>

			    <div class="rs_mainslider_left_container rs_center_vertical_container">
			    	<div class="rs_mainslider_left rs_center_vertical"></div>
			    </div>

			    <div class="rs_mainslider_right_container rs_center_vertical_container">
			    	<div class="rs_mainslider_right rs_center_vertical"></div>
			    </div>

			    <div class="rs_mainslider_dots_container rs_center_horizontal_container">
			      <ul class="rs_mainslider_dots rs_center_horizontal clearfix"></ul>
			    </div>

			</div><!-- / -->
		</div><!-- /.container-fluid [bigSlider] -->
		<div class="container">
			<div class="row">
				<div class="span12 welcomeMessage">
					<h1>welcome to our website</h1>
					<p>
						Nunc luctus pretium neque ac faucibus. Sed odio purus, dignissim eu posuere at, luctus in metus. Morbi vulputate molestie consectetur. Mauris urna neque, blandit at ultrices at, accumsan in magna. Maecenas volutpat justo sed nisi varius in ullamcorper nunc sodales.
					</p>
				</div>
			</div>
		</div><!-- /.container [welcomeMessage] -->

		<div class="featureSite coloredGray">
			<div class="container">
				<ul class="row">
					<li class="span4">
						<h3>OUR PORTFOLIO</h3>
						<figure>
							<a href="#" class="iconBg">
								<img src="img/large_icons/portfolio2.png" alt="our portfolio">
							</a>
							<figcaption>
								<p>
									Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque laoreet auctor purus in accumsan. 
								</p>
							</figcaption>
						</figure>
					</li>
					<li class="span4">
						<h3>OUR PORTFOLIO</h3>
						<figure>
							<a href="#" class="iconBg">
								<img src="img/large_icons/settings2.png" alt="our portfolio">
							</a>
							<figcaption>
								<p>
									Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque laoreet auctor purus in accumsan. 
								</p>
							</figcaption>
						</figure>
					</li>
					<li class="span4">
						<h3>OUR PORTFOLIO</h3>
						<figure>
							<a href="#" class="iconBg">
								<img src="img/large_icons/mess2.png" alt="our portfolio">
							</a>
							<figcaption>
								<p>
									Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque laoreet auctor purus in accumsan. 
								</p>
							</figcaption>
						</figure>
					</li>
				</ul><!-- /.row [featureSite] -->
			</div><!-- /.container -->
		</div><!-- /.featureSite -->

		<div class="container">
			<div class="row pageStyle">
				<div class="span8">
					<h1>Lorem ipsum dolor  sit amet</h1>
					<h3>Augue pulvinar auctor. Lorem ipsum dolor sit</h3>
					<ul class="list star-list">
						<li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li>
						<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nulla massa, rhoncus sit amet mattis it</li>
						<li>Duis varius libero vel libero molestie hendrerit. Vestibulum ante ipsum</li>
						<li>Etiam vestibulum dignissim iaculis. Aliquam placerat iaculis augue et semper</li>
						<li>Nullam pretium faucibus mauris vitae mattis</li>
						<li>Pellentesque turpis eros, aliquet ac scelerisque in, lacinia et eros</li>
						<li>Aliquam placerat iaculis augue et semper</li>
						<li>Nullam pretium faucibus mauris vitae mattis</li>
					</ul>
				</div><!-- /.span8 -->
				<div class="span4">
					<div class="tabs">
						<ul class="nav nav-tabs" id="myTab">
							<li class="active"><a href="#tab1">Tab1</a></li>
							<li><a href="#tab2">Tab2</a></li>
							<li><a href="#tab3">Tab3</a></li>
						</ul>
						<div class="tab-content">
						  	<div class="tab-pane active" id="tab1">
						  		<ul class="tabPost">
						  			<li>
						  				<figure>
						  					<img src="img/flickr/flickr1.jpg" alt="photo">
						  				</figure>
						  				<p>
						  					<a href="#">Phasellus ut placerat massa. Nunc commodo sagittis rutrum.</a> 
						  				</p>
						  			</li>
						  			<li>
						  				<figure>
						  					<img src="img/flickr/flickr2.jpg" alt="photo">
						  				</figure>
						  				<p>
						  					<a href="#">
						  						Praesent dui orci, consectetur vel vehicula sed. Aenean lorem neque.
						  					</a>
						  				</p>
						  			</li>
						  		</ul>
						  	</div>
						  	<div class="tab-pane" id="tab2">
						  		<ul class="tabPost">
						  			<li>
						  				<figure>
						  					<img src="img/flickr/flickr3.jpg" alt="photo">
						  				</figure>
						  				<p>
						  					<a href="#">Phasellus ut placerat massa. Nunc commodo sagittis rutrum.</a> 
						  				</p>
						  			</li>
						  			<li>
						  				<figure>
						  					<img src="img/flickr/flickr4.jpg" alt="photo">
						  				</figure>
						  				<p>
						  					<a href="#">
						  						Praesent dui orci, consectetur vel vehicula sed. Aenean lorem neque.
						  					</a>
						  				</p>
						  			</li>
						  		</ul>
						  	</div>
						  	<div class="tab-pane" id="tab3">
						  		<ul class="tabPost">
						  			<li>
						  				<figure>
						  					<img src="img/flickr/flickr5.jpg" alt="photo">
						  				</figure>
						  				<p>
						  					<a href="#">Phasellus ut placerat massa. Nunc commodo sagittis rutrum.</a> 
						  				</p>
						  			</li>
						  			<li>
						  				<figure>
						  					<img src="img/flickr/flickr6.jpg" alt="photo">
						  				</figure>
						  				<p>
						  					<a href="#">
						  						Praesent dui orci, consectetur vel vehicula sed. Aenean lorem neque.
						  					</a>
						  				</p>
						  			</li>
						  		</ul>
						  	</div>
						</div>
					</div><!-- /.tabs -->
				</div><!-- /.span4 -->
			</div><!-- /.row -->
		</div><!-- /.container -->

	<div class="container-fluid coloredGray">
		<div class="container">
			<div class="row viewProjects">
				<div class="span12">
					<a href="#">VIEW ALL PROJECT &#8594;</a>
				</div>
			</div>
			<ul class="row portfolioItems">
				<li class="span3">
					<figure>
						<a href="#" class="thumbnail">
							<img src="img/portfolio/item1.jpg" alt="project">
						</a>
						<figcaption>
							<h3><a href="#">Photo of morning grass</a></h3>
							<p>
								Class aptent taciti sociosqu ad litora torque
							</p>
						</figcaption>
					</figure>
				</li>
				<li class="span3">
					<figure>
						<a href="#" class="thumbnail">
							<img src="img/portfolio/item2.jpg" alt="project">
						</a>
						<figcaption>
							<h3><a href="#">Stylish coffee cup</a></h3>
							<p>
								Class aptent taciti sociosqu ad litora torque
							</p>
						</figcaption>
					</figure>
				</li>
				<li class="span3">
					<figure>
						<a href="#" class="thumbnail">
							<img src="img/portfolio/item3.jpg" alt="project">
						</a>
						<figcaption>
							<h3><a href="#">Burlesque</a></h3>
							<p>
								Class aptent taciti sociosqu ad litora torque
							</p>
						</figcaption>
					</figure>
				</li>
				<li class="span3">
					<figure>
						<a href="#" class="thumbnail">
							<img src="img/portfolio/item4.jpg" alt="project">
						</a>
						<figcaption>
							<h3><a href="#">Daredevil</a></h3>
							<p>
								Class aptent taciti sociosqu ad litora torque
							</p>
						</figcaption>
					</figure>
				</li>
			</ul><!-- /.portfolioItems -->
		</div><!-- /.container [] -->
	</div>

		<footer class="mainFooter">
			<div class="clients">
				<div class="container">
					<ul class="row inline">
						<li>
							<a href="#">
								<img src="img/partner/partner5.png" alt="themeforest">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/partner/partner4.png" alt="audiojungle">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/partner/partner3.png" alt="activeden">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/partner/partner2.png" alt="graphicriver">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/partner/partner1.png" alt="codecanyon">
							</a>
						</li>
					</ul><!-- /.row -->
				</div><!-- /.container -->
			</div><!-- /.clients -->

			<div class="footerWidgets">
				<div class="container">
					<div class="row">
						<div class="span4">
							<a href="#" class="brand">DesignPortfolio</a>
							<p>
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin massa vel odio gravida placerat. Suspendisse porta, nulla non eleifend vehicula, libero sapien luctus sapien, ut sodales augue velit vitae lacus. 
							</p>
						</div><!-- [footerMessage] -->
						<div class="span4">
							<h2>FLICKR PHOTOSTREAM</h2>
							<ul class="inline flickrImages" data-userid="30233972@N02" data-items="8">
												
							</ul><!-- /.row-fluid [flickrimages] -->
						</div><!-- [flickr] -->
						<div class="span4">
							<h2>RECENT POSTS</h2>
							<ul class="recentPosts">
								<li>
									<p>
										<a href="#">
											Pellentesque rhoncus nibh id nibh mollis Etiam aliquam, eros id facilisis 
										</a>
									</p>
								</li>
								<li>
									<p>
										<a href="#">
											Donec volutpat, nisl quis luctu dap
										</a>
									</p>
								</li>
								<li>
									<p>
										<a href="#">
											Etiam faucibus, ligula nec blandit ornare, massa enim ultricies leo, eget porta dolor elit.
										</a>
									</p>
								</li>
							</ul>
						</div><!-- [recent posts] -->
					</div><!-- /.row -->
				</div><!-- /.container -->
			</div><!-- /.footerWidgets -->

			<div class="copyRight">
				<div class="container">
					<div class="row">
						<div class="span7">
							<p>
								&copy; Copyright 2013. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
							</p>
						</div>
						<div class="span5 text-right">
							<p>
								Designed by Theme Designer. Developed by 960 Development
							</p>
						</div>
					</div><!-- /.row -->
				</div><!-- /.container -->
			</div><!-- /.copyright -->
		</footer><!-- /.footer [mainFooter] -->
	
	<!-- Scripts -->
	<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
	<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    <script src="js/bootstrap.min.js"></script>
	<script src="js/settingsbox.js"></script>
	<script src="js/farbtastic/farbtastic.js"></script>
	<script src="js/jquery.prettyPhoto.js"></script>
	<script src="js/izotope.js"></script>
	<script src="js/option.js"></script>
	</body>
</html>